<script setup lang="ts">
import { inject, onMounted, ref, defineModel } from 'vue';

const utils = inject<any>('utils');
const log = inject<any>('log');
log.debug('HelloWorld', 'HelloWorld');
console.log(utils.getParams());

const canvas = ref();
// 实现根据鼠标进行绘制
onMounted(() => {
  const ctx = canvas.value.getContext('2d');
  ctx.lineWidth = 5;
  // 圆滑
  ctx.lineCap = 'round';
  let painting = false;
  canvas.value.addEventListener('mousedown', (e: any) => {
    painting = true;
    ctx.beginPath;
    ctx.moveTo(e.offsetX, e.offsetY);
  });
  canvas.value.addEventListener('mousemove', (e: any) => {
    if (painting) {
      ctx.lineTo(e.offsetX, e.offsetY);
      ctx.stroke();
    }
  });
  canvas.value.addEventListener('mouseup', () => {
    painting = false;
  });
});
// defineProps<{
//   modelValue: string;
// }>();
const mode: any = defineModel<string>();
console.log(mode);
const changeData = () => {
  mode.value = "Hello World Son"
}

</script>

<template>
  <input />
  <button @click="changeData">点击修改父组件的props</button>
  <div style="border: 1px solid #000">
    <canvas ref="canvas"></canvas>
  </div>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
.box_5 {
  position: absolute;
  left: 0;
  top: 0;
  width: 812px;
  height: 375px;
  background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng60a5b8068052f38f56f966c0e4185a9d6407c37992b9f04eb325e4825bc12631)
    100% no-repeat;
  background-size: 100% 100%;
}

.text_7 {
  width: 78px;
  height: 28px;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 26px;
  letter-spacing: -3.276470899581909px;
  font-family: IdeaFonts-QianXiaTi;
  font-weight: normal;
  text-align: center;
  white-space: nowrap;
  line-height: 28px;
  margin: 278px 0 0 87px;
}

.box_6 {
  width: 552px;
  height: 319px;
  border: 4px 12, 6 rgba(255, 255, 255, 1);
  margin: 6px 6px 0 89px;
}

.block_1 {
  height: 67px;
  background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngda379bbcc7aaa67be91e5cbd336bacd07e9a1ba5d51fa1198101d089f3988fa1)
    0px 0px no-repeat;
  background-size: 71px 68px;
  width: 70px;
  margin: 113px 0 0 256px;
}

.image-wrapper_3 {
  height: 129px;
  background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng399579481922bc88e45a30a0671e3595a40b4ff08f8ec68a30a3bb29101577cb)
    100% no-repeat;
  background-size: 100% 100%;
  width: 32px;
  margin: -86px 0 0 -4px;
}

.image_2 {
  width: 32px;
  height: 128px;
}

.text_8 {
  width: 160px;
  height: 22px;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 16px;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  line-height: 22px;
  margin: 92px 0 25px 196px;
}

.box_7 {
  height: 39px;
  background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngae6e0cbcab6a3abc2c0158e635bc9ff350a76e352e79e93b439061f8b4909cf3) -1px -1px
    no-repeat;
  background-size: 136px 41px;
  width: 134px;
  position: absolute;
  left: 59px;
  top: 273px;
}

.image-wrapper_4 {
  height: 26px;
  background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng9192eb8ed429fce61e3c92787e2be8bf420ecb680ad392b6b7ea806414a93eda) -1px
    0px no-repeat;
  background-size: 136px 27px;
  margin-top: 22px;
  width: 134px;
}

.image_3 {
  width: 119px;
  height: 11px;
  margin: 14px 0 0 10px;
}
</style>
